<template>
  <div class="music-control">
    <div class="song-info">
      <div class="avtar" :style="'background-image:url(http://imgcache.qq.com/music/photo/album_300/'+(albumId%100)+'/300_albumpic_'+albumId+'_0.jpg)'"></div>
      <div class="progress-name">
        <div class="song">
          <span>{{songname}}</span>
          <span>{{currentTime}}/{{musicTime}}</span>
        </div>
        <div class="progress-parent">
          <div class="progress" :style="'width:'+progress+'%'"></div>
        </div>
      </div>
    </div>
    <div class="control">
      <div class="contrl-icon" :class="isPlay?'play':'pause'" @click="setIsPlay()"></div>
    </div>
    <audio></audio>
  </div>
</template>
<script>
export default {
  data () {
    return {
      audio: '',
      albumId: '',
      songname: '',
      progress: 0,
      currentTime: '00:00',
      musicTime: '00:00',
      progressInter: '',
      isPlay: false
    }
  },
  mounted: function () {
    let audio = document.createElement('audio')
    audio.autoplay = 'autoplay'
    audio.addEventListener('play', this.audioPlay)
    audio.addEventListener('pause', this.audioPause)
    this.audio = audio
  },
  methods: {
    playMusic: function (obj) {
      let musicSrc = 'http://ws.stream.qqmusic.qq.com/C100' + obj.songId + '.m4a?fromtag=0&guid=126548448'
      this.audio.src = musicSrc
      this.albumId = obj.albumId
      this.songname = obj.songName
      let that = this
      if (that.progressInter) {
        clearInterval(that.progressInter)
      }
      that.progressInter = setInterval(function () {
        that.setProgress()
      }, 100)
    },
    setProgress: function () {
      // 当音乐播放完成是切换下一首
      if (this.audio.currentTime >= this.audio.duration && this.audio.duration !== 0) {
        console.log('下一首')
        this.playNext()
      }
      if (!this.isPlay) {
        return false
      }
      this.currentTime = (parseInt(this.audio.currentTime / 60) < 10 ? '0' + parseInt(this.audio.currentTime / 60) : parseInt(this.audio.currentTime / 60)) + ':' + (parseInt(this.audio.currentTime % 60) < 10 ? '0' + parseInt(this.audio.currentTime % 60) : parseInt(this.audio.currentTime % 60))
      this.musicTime = (parseInt(this.audio.duration / 60) < 10 ? '0' + parseInt(this.audio.duration / 60) : parseInt(this.audio.duration / 60)) + ':' + (parseInt(this.audio.duration % 60) < 10 ? '0' + parseInt(this.audio.duration % 60) : parseInt(this.audio.duration % 60))
      this.progress = this.audio.currentTime / this.audio.duration * 100
    },
    audioPlay: function () {
      this.isPlay = true
    },
    audioPause: function () {
      this.isPlay = false
    },
    setIsPlay: function () {
      if (this.audio.paused) {
        this.audio.play()
      } else {
        this.audio.pause()
      }
    },
    playNext: function () {
      console.log(this.$router.app.$children[0])
      if (this.$router.app.$children[0].index < this.$router.app.$children[0].playList.length) {
        this.$router.app.$children[0].index = this.$router.app.$children[0].index + 1
      } else {
        this.$router.app.$children[0].index = 0
      }
    }
  }
}
</script>
<style scoped>
.music-control{width: 94%;padding: 0 3%;height: 50px;border-top: 1px #ededed solid;position: fixed;bottom: 0;left: 0;background: #ffffff;display: flex;justify-content: space-between;align-items: center}
.song-info{width: 80%;height: 100%;display: flex;align-items: center;}
.avtar{width: 40px;height: 40px;border-radius: 5px;background-repeat: no-repeat;background-size: 100%;background-position: center;border: 1px #ededed solid}
.progress-name{width: 70%;height: 100%;display: flex;flex-direction: column;justify-content: center;margin-left: 10px}
.song{font-size: 14px;margin-bottom: 5px;display: flex;justify-content: space-between}
.progress-parent{width: 100%;height: 5px;border-radius: 10px;overflow: hidden;background: #ededed}
.progress{width: 50%;height: 100%;background: #e8483c}
.contrl-icon{width: 25px;height: 25px;background-repeat:no-repeat;background-size: 100%}
.pause{background-image: url("./../assets/play_icon.png");}
.play{background-image: url("./../assets/pause_icon.png");}
</style>
